<template>
    <view class="contact-container">
        <CmsTabs :type="11" :page-title="'联系我们'" @project-tab-change="handleProjectTabChange" @data-loaded="handleDataLoaded">
            <!-- 复制成功弹窗 -->
            <view class="success-popup" v-if="showCopySuccessPopup" @click="handleCloseCopySuccessPopup">
                <view class="popup-mask"></view>
                <view class="success-popup-content" @click.stop>
                    <view class="success-icon">
                        <image src="../../static/success2.png" mode="widthFix" />
                    </view>
                    <view class="success-title">复制成功</view>
                    <view class="success-message">请用手机自带浏览器打开。</view>
                    <view class="browser-guide">
                        <image src="../../static/demo.png" mode="widthFix" />
                    </view>
                    <view class="success-btn" @click="handleCloseCopySuccessPopup">
                        <text class="btn-text">我知道了</text>
                    </view>
                </view>
            </view>
        </CmsTabs>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import CmsTabs from '@/components/cms-tabs/cms-tabs.vue'

const showCopySuccessPopup = ref(false)

// 处理项目tab切换
const handleProjectTabChange = (tabData) => {
    console.log('项目tab切换:', tabData)
}

// 处理数据加载完成
const handleDataLoaded = (data) => {
    console.log('数据加载完成:', data)
}

// 关闭复制成功弹窗
const handleCloseCopySuccessPopup = () => {
    showCopySuccessPopup.value = false
}
</script>

<style lang="scss" scoped>  
    .contact-container{
        min-height: 100vh;
        background: #F6F6F6;
        padding-bottom: 140rpx;
        overflow: hidden;
    }

    // 复制成功弹窗样式
    .success-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;

        .popup-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .success-popup-content {
            position: relative;
            width: 600rpx;
            min-height: 500rpx;
            background: #FFFFFF;
            border-radius: 24rpx;
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40rpx 32rpx;

            .success-icon {
                width: 120rpx;
                height: 120rpx;
                margin-bottom: 24rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .success-title {
                font-size: 36rpx;
                font-weight: 600;
                color: #000;
                margin-bottom: 16rpx;
                text-align: center;
            }

            .success-message {
                font-size: 28rpx;
                color: rgba(0, 0, 0, 0.80);
                text-align: center;
                margin-bottom: 32rpx;
                line-height: 1.5;
            }

            .browser-guide {
                margin-bottom: 40rpx;

                image {
                    width: 200rpx;
                    height: 300rpx;
                }
            }

            .success-btn {
                width: 100%;
                height: 88rpx;
                background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .btn-text {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #FFFFFF;
                }
            }
        }
    }
</style>